<template>
    <div class="box">
        <div>
            <h1>导出Excel的功能</h1>
            <el-button type="primary" @click="exportExcel">导出 Excel</el-button>
        </div>
        <br >
        <el-table v-if="tableData" :data="tableData" border style="width: 100%" class="tabs" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="id" label="ID" width="70"/>
            <el-table-column prop="regional" label="大区"/>
            <el-table-column prop="SerialName" label="项目名称" width="180px"/>
            <el-table-column prop="WorkingDate" label="工期(天)"/>
            <el-table-column prop="contractMoney" label="合同额"/>
            <el-table-column prop="goodMoney" label="已收款"/>
            <el-table-column prop="endMoney" label="尾款"/>
            <el-table-column prop="signed" label="合同签署"/>
            <el-table-column prop="manager" label="项目经理"/>
            <el-table-column prop="Creationtime" label="创建时间"/>
            <el-table-column prop="content" label="项目内容" width="320" align="left"/>
            <el-table-column prop="file" label="文件下载">
                <template slot-scope="scope">
                <a :href="scope.row.file">{{ scope.row.fileText }}</a>
                <!-- <el-tag disable-transitions>{{scope.row.fileText}}</el-tag> -->
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 编辑表格的弹出层 -->
        <el-dialog :visible.sync="dialogFormVisible" title="编辑内容">
            <el-form :model="form">
                <el-row>
                <el-col v-for="(item,key,index) in formList" :span="12" :key="index">
                    <el-form-item :label="formListTitle[(index)]" :label-width="formLabelWidth">
                    <el-input v-model="formList[key]" autocomplete="off"/>
                    </el-form-item>
                </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="confirmFn">取 消</el-button>
                <el-button type="primary" @click="confirmFn">确 定</el-button>
            </div>
        </el-dialog>
        <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="paginGetList" />
    </div>
</template>

<script>
import tableDatas from './json.js'; // 自定义的数据
import Pagination from '@/components/Pagination/index';

export default {
  components: { Pagination },
  data() {
    return {
      tableData: "",
      listData: [], //保存导出Excel的数组
      dialogFormVisible: false, //弹出层状态
      form: {
        regional: "",
        SerialName: "",
        WorkingDate: "",
        contractMoney: ""
      },
      formLabelWidth: "120px", //宽度
      formList: {}, //保存弹出层编辑的内容
      //保存弹出层的label
      formListTitle: [
        "id",
        "大区",
        "项目名称",
        "工期(天)",
        "合同额",
        "已收款",
        "尾款",
        "合同签署",
        "项目经理",
        "创建时间",
        "项目内容",
        "下载说明",
        "文件下载"
      ],
      total: tableDatas.length,
      listQuery: {
        page: 1,
        limit: 10
      }
    };
  },
  created() {
    //获取数据
    this.getList();
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.listData = val;
    },
    exportExcel() {
      import("@/vendor/Export2Excel").then(excel => {
        //导出Excel的表头
        const tHeader = [
          "id",
          "大区",
          "项目名称",
          "工期(天)",
          "合同额",
          "已收款",
          "尾款",
          "合同签署",
          "项目经理",
          "创建时间",
          "项目内容"
        ];
        //导出Excel和表头对应的数据 id对id  字段一一对应
        const filterVal = [
          "id",
          "regional",
          "SerialName",
          "WorkingDate",
          "contractMoney",
          "goodMoney",
          "endMoney",
          "signed",
          "manager",
          "Creationtime",
          "content"
        ];
        //设置导出Excel的数据 formatJson是固定写法。
        const data = this.formatJson(filterVal, this.listData);
        excel.export_json_to_excel({
          header: tHeader, //表头 必填
          data, //具体数据 必填
          filename: "excel-list", //非必填
          autoWidth: true, //非必填
          bookType: "xlsx" //非必填
        });
      });
    },
    //固定写法，用来做筛选的。
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j];
        })
      );
    },
    //点击表格编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.formList = row;
      // delete this.formList.id;
      // delete this.formList.fileText;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //点击确定
    confirmFn() {
      this.dialogFormVisible = false;
      console.log(this.formList);
    },
    // 获取数据
    getList() {
      setTimeout(() => {
        this.tableData = tableDatas;
      }, 1000);
    },
    //改变
    paginGetList({ page, limit }) {
      console.log(page);
      console.log(limit);
    }
  },
};
</script>

<style>
.box {
  /* width: 1200px; */
  margin: 0px auto;
}
.tabs {
  font-size: 12px;
}
.tabs div {
  text-align: center;
}
.tabs .is-left div {
  text-align: left;
}
</style>
